<template>
  <div class="hello">
    login
    <div @click="sendMyData()">点击去调用android</div>
    <div>{{androidcallback}}</div>
    <div>{{androidcallback2}}</div>
    <div class="testrem">测试rem</div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      androidcallback: "a",
      androidcallback2: "c"
    }
  },
  created() {

  },
  ready: function() {


  },
  mounted() {
    this.$bridge.registerHandler("androidToJsTest", (data, responseCallback) => {
      console.log("android调用js");
      console.log(data);
      this.androidcallback2 = data;
      var responseData = "收到安卓数据";
      responseCallback(responseData);
    });
  },
  methods: {
    sendMyData() {
      console.log("---------------1111")
      console.log(this.$bridge)
      console.log(this)
      console.log(window)
      console.log(window.WebViewJavascriptBridge)
      this.androidcallback = "bbb";
      this.$bridge.callHandler(
        'submitFromWeb'
        , { 'param': '中文测试' }
        , responseData => {
          console.log("js调用android函数，android又返回的数据--");
          console.log(responseData);
          this.androidcallback = responseData;
        }
      );
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.testrem {
  width: 9rem;
  height: 5rem;
  background-color: red;
}
</style>
